<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-09 10:07:06
 * @LastEditTime: 2019-10-19 17:34:43
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="mine">
    <div class="header">
      <img class="hdr_img" src="../assets/mine_back.png" alt="">
      <div class="geren_xinxi" @click="jin_geren">
        <div class="xinxi_top">
          <img @click.stop :src="image" alt="">
          <div>
            <p class="ming">{{name}}</p>
            <p class="gongsi">{{gong_si}}</p>
          </div>
          <p :class="renz?'renzheng':'renzhe'">{{text}}</p>
        </div>
        <div style="height:0.01rem;background:#EEEEEE;width:3.3rem;margin:0 auto;"></div>
        <p class="ge_qian">改变“思维方式”，人生将发生180度转变</p>
      </div>
    </div>
    <div class="fuwu">
      <div class="heng_list" @click="jin_kefu">
        <img src="../assets/kefu.png" alt="">
        <p>我的客服</p>
      </div>
      <div class="heng_list" @click="jin_qieqiye">
        <img src="../assets/qiehuan_qiye.png" alt="">
        <p>切换企业</p>
      </div>
      <div class="heng_list" @click="jin_shoucang">
        <img src="../assets/shoucang.png" alt="">
        <p>我的收藏</p>
      </div>
    </div>
    <div style="height:0.1rem;background:#EEEEEE;"></div>
    <div class="she_zhi">
      <ul>
        <li @click="jin_geren">
          <div>
            <img src="../assets/shezhi_mine.png" alt="">
            <p>我的设置</p>
          </div>
          <img class="youjian_tou" src="../assets/right_jiantou.png" alt="">
          <div class="dian_quan"></div>
        </li>
        <li @click="jin_myren">
          <div>
            <img src="../assets/qiye_ren.png" alt="">
            <p>我的认证</p>
          </div>
          <img class="youjian_tou" src="../assets/right_jiantou.png" alt="">
          <div class="dian_quan"></div>
        </li>
        <li @click="jin_xiu">
          <div>
            <img src="../assets/xiu_mima.png" alt="">
            <p>我的密码</p>
          </div>
          <img class="youjian_tou" src="../assets/right_jiantou.png" alt="">
          <div class="dian_quan"></div>
        </li>
        <li @click="jin_jianyi">
          <div>
            <img src="../assets/fan_kui.png" alt="">
            <p>我的建议</p>
          </div>
          <img class="youjian_tou" src="../assets/right_jiantou.png" alt="">
          <div class="dian_quan"></div>
        </li>
      </ul>
    </div>
    <div @click="off_no" class="out_no">退出登录</div>
    <div class="footer">
      <div class="out_1" @click="home">
        <div class="in_1">
          <img src="../assets/home_left.png">
          <p style="color:#a9a9a9;">首页</p>
        </div>
      </div>
      <div class="out_1">
        <div class="in_1">
          <img src="../assets/home_right_red.png">
          <p style="color:#EB2616;">我的</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { check_login, logout,get_my_info,query_user_ent_list } from "../api/api.js";
export default {
  name: "mine",
  data() {
    return {
      mobile: "",
      user_id:'',
      image:'',
      name:'',
      gong_si:'',
      renz:true,
      text:'',
      renzheng_jin:true,
      
    };
  },
  mounted() {
    if (sessionStorage.getItem("mobile") != null) {
      this.mobile = JSON.parse(sessionStorage.getItem("mobile"));
    }
    check_login({
      data: {
        mobile: this.mobile
      }
    }).then(res => {
      if (res.data.code == 11001) {
      } else if (res.data.code == 11000) {
        this.$toast("未登录，请重新登录");
        this.$router.push("/");
      }
    });
    
    sessionStorage.setItem("text_title", JSON.stringify(''));
    if(sessionStorage.getItem("xuan") != undefined){
      sessionStorage.setItem("xuan", JSON.stringify(''));
    }
    if(sessionStorage.getItem("xuan_two") != undefined){
      sessionStorage.setItem("xuan_two", JSON.stringify(''));
    }
    if(sessionStorage.getItem("xuan_three") != undefined){
      sessionStorage.setItem("xuan_three", JSON.stringify(''));
    }
    if(sessionStorage.getItem("xuan_four") != undefined){
      sessionStorage.setItem("xuan_four", JSON.stringify(''));
    }
  },
  watch: {},
  created(){
    this.jichu()   //获取基础信息
  },
  methods: {
    // 获取我的基础信息
    jichu(){
      if (sessionStorage.getItem("data_mobal") != null) {
        this.user_id = JSON.parse(
          JSON.parse(sessionStorage.getItem("data_mobal"))
        ).user_id;
      }
      get_my_info({data:{
        user_id:this.user_id
      }}).then(res=>{
        if(res.data.code==10069){
          console.log(res)
          var date=JSON.parse(res.data.body.data)
          if(date.name!=undefined){
            this.name=date.name
          }else{
            this.name='未命名'
            this.renzheng_jin=false
          }
          if(date.avatar!=undefined){
            this.image=date.avatar
            // console.log(this.image)
          }else{
            this.image=require('../assets/mine_t.png')
          }
          console.log(date)
          // if()
          if(date.ent_info!=undefined){
            if(date.ent_info.ent_name!=undefined){
              this.gong_si=date.ent_info.ent_name
              this.text='已认证'
              this.renz=false
            }else{
              this.gong_si='企业名称'
              this.renzheng_jin=false
            }
          }else{
            this.text=''
            this.gong_si='企业名称'
          }
          if(date.date_birth==undefined){
            this.renzheng_jin=false
          }
          if(date.email==undefined){
            this.renzheng_jin=false
          }
          if(date.sex==undefined){
            this.renzheng_jin=false
          }
          if(date.area==undefined){
            this.renzheng_jin=false
          }
          console.log(date)
        }else if(res.data.code==10070){
          this.$toast('获取信息失败')
        }
      })
    },
    home() {
      this.$router.push("/home");
    },
    // 进入个人设置页面
    jin_geren(){
      this.$router.push('/persona')
    },
    // 退出
    off_no() {
      logout({
        data: {
          mobile: this.mobile
        }
      }).then(res => {
        console.log(res);
        if (res.data.code == 10015) {
          this.$toast("成功退出");
          localStorage.setItem("mlbb_phone",'');
          localStorage.setItem("mlbb_password",'');
          this.$router.push("/");
        } else if (res.data.code == 10016) {
          this.$toast("退出失败");
        } else if (res.data.code == 11000) {
          this.$toast("未登录");
        }
      });
    },
    // 进入我的认证
    jin_myren(){
      if(this.renzheng_jin){
        this.$router.push('/myren')
      }else{
        this.$toast('为了您的安全性，请填写我的设置')
      }
    },
    //进入我的密码
    jin_xiu(){
      this.$router.push('/xiu')
    },
    // 进切换企业
    jin_qieqiye(){
      this.$loading.open();
      query_user_ent_list({data:{
        user_id:this.user_id
      }}).then(res=>{
        this.$loading.close();
        console.log(JSON.parse(res.data.body.data))
        console.log(res)
        if(res.data.code==10080){
          this.$router.push('/ctu')
        }else if(res.data.code==10081){
          this.$toast('获取失败')
        }
      })
    },
    // 进客服页面
    jin_kefu(){
      this.$router.push('/cusser')
    },
    // 进我的建议
    jin_jianyi(){
      this.$router.push('/feedback')
    },
    // 进收藏
    jin_shoucang(){
      this.$toast('正在努力开发中，敬请期待。。。')
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.mine {
  height: 100vh;
  background: #fff;
  .header{
    position: relative;
    .hdr_img{
      height:1.75rem;
      width:100%;
    }
    .geren_xinxi{
      height:1.39rem;
      width:3.45rem;
      box-shadow:0px 0px 4px 2px rgba(190,190,190,0.5);
      border-radius:12px;
      background:rgba(255,255,255,1);
      position: absolute;
      left: 50%;
      margin-left: -1.725rem;
      top:0.87rem;
      .xinxi_top{
        position: relative;
        display: flex;
        justify-content: left;
        align-items: center;
        margin-top:0.26rem;
        margin-bottom:0.28rem;
        img{
          height:0.45rem;
          width:0.45rem;
          border-radius:50%;
          margin-left: 0.15rem;
          margin-right:0.15rem;
        }
        div{
          .ming{
            font-size: 0.16rem;
            font-weight: bold;
            color:#1A2533;
          }
          .gongsi{
            font-size: 0.1rem;
            color:#888888;
            margin-top:0.02rem;
          }
        }
        .renzheng{
          font-size: 0.1rem;
          color:#A22824;
          position: absolute;
          right:0.15rem;
          top:0.02rem;
        }
        .renzhe{
          font-size: 0.1rem;
          color:#6ABFA7;
          position: absolute;
          right:0.15rem;
          top:0.02rem;
        }
      }
      .ge_qian{
        width:3.3rem;
        margin: 0 auto;
        margin-top:0.11rem;
        text-align: center;
        font-size: 0.1rem;
        color:#888888;
      }
    }
  }
  .fuwu{
    margin-top:0.71rem;
    height:0.54rem;
    display: flex;
    justify-content: space-between;
    padding-left: 0.34rem;
    padding-right: 0.34rem;
    .heng_list{
      width:0.58rem;
      img{
        height:0.2rem;
        width:0.2rem;
        display: block;
        margin: 0 auto;
      }
      p{
        font-size: 0.14rem;
        color:#888888;
        margin-top:0.07rem;
      }
    }
  }
  .she_zhi{
    ul{
      padding:0 0.14rem;
      li{
        height:0.5rem;
        border-bottom: 0.01rem solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        overflow: hidden;
        div{
          display: flex;
          justify-content: left;
          align-items: center;
          img{
            height:0.2rem;
            width:0.2rem;
            margin-right:0.12rem;
          }
          p{
            font-size: 0.14rem;
            color:#1A2533;
          }
        }
        .youjian_tou{
          height:0.12rem;
          width:0.08rem;
        }
        .dian_quan{
          height:0.3rem;
          width:0.3rem;
          position: absolute;
          left: 50%;
          margin-left:-0.15rem;
          border-radius: 50%;
          transition: 0.5s all;
        }
        &:hover,&:active{
          .dian_quan{
            background: rgba(190,190,190,0.2);
            box-shadow:0px 0px 0.5rem 0.1rem rgba(190,190,190,0.5);
          }
        }
      }
    }
  }
  .out_no{
    height: 0.3rem;
    width: 1.2rem;
    border-radius: 0.04rem;
    border:0.01rem solid #A9A9A9;
    font-size: 0.14rem;
    color: #888888;
    line-height: 0.3rem;
    text-align: center;
    margin: 0 auto;
    margin-top:0.2rem;
    margin-bottom:0.7rem;
  }
  .footer {
    position: fixed;
    bottom: 0;
    height: 0.49rem;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    background:#fff;
    box-shadow:0px 0px 10px 0px rgba(0,0,0,0.05);
    .out_1 {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      .in_1 {
        img {
          margin: 0 auto;
          height: 0.24rem;
          width: 0.24rem;
        }
        p {
          margin: 0 auto;
          font-size: 0.1rem;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
